<template>
	<div class="fashion-talk">
		<div class="com-header">
			<div class="back"
				onclick="javascript:history.go(-1)"
			>
				<i class="iconfont">&#xe697;</i>
			</div>
			<div class="content">
				达人说
			</div>
		</div>
		<div class="no-place"></div>
		<div class="banner">
			<swiper :options="swiperOption">
				<swiper-slide v-for="(item, index) in bannerList" :key="index">
					<div class="b-content"
						@click="goArt(item.id)"	
					>
						<img v-lazy="item.app_image" 
							:key="item.app_image"/>
						<p>{{item.shorttitle}}</p>
						<div class="bc-tab">
							<p>{{item.itemnum}}</p>
							<p>单品</p>
							<img v-lazy="item.image" />
						</div>
					</div>
				</swiper-slide>
				<!-- <div class="swiper-pagination" slot="pagination"></div> -->
			</swiper>
		</div>
		<div class="new-work"
			id="newwork"
		>
			<h1>本周新作</h1>
			<ul>
				<li v-for="(item, index) in newList"
					@click="goArt(item.id)"
				>
					<img v-lazy="item.article_banner"/>
					<p class="title oneLine">{{item.name}}</p>
					<div class="info">
						<img v-lazy="item.head_img" />
						<p class="name">{{item.talent_name}}</p>
					</div>
				</li>
			</ul>
		</div>
		<div class="all"
			id="all"
		>
			<h1>大家都在逛</h1>
			<div class="all-nav"
				:class="[fixclass ? 'active' : '']"
			>
				<ly-tab
				    v-model="selectedId"
				    :items="items"
				    :options="options"
				    @change="handleChange"
				>
				</ly-tab>
			</div>
			<ul
				:class="[fixclass ? 'active' : '']"
				id="goods"
			>
				<li v-for="(item, index) in goodsList"
					@click="goArt(item.id)"
				>
					<div class="all-header">
						<img v-lazy="item.article_banner" />
						<div class="all-box">
							<p>{{item.title}}/{{item.itemnum}}单品</p>
						</div>
					</div>					
					<p class="name">{{item.name}}</p>
					<p class="title twoLine">{{item.article}}</p>
				</li>
				<div class="goods-none"
					v-if="this.goodsList.length == 0"
				>
					<img src="../assets/img/nodata.png" />
				</div>
			</ul>
		</div>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	export default{
		data(){
			return{
				bannerList: [],
				newList: [],
				list: [],
				allList: [],
				goodsList:[],
				allTitle: '',
				colorLeft: window.localStorage.getItem("left"), 
				colorRight: window.localStorage.getItem("right"), 
				swiperOption: {
					slidesPerView: 'auto',
					spaceBetween: 30,
					pagination: {
						el: '.swiper-pagination',
						clickable: true
					}
				},
				selectedId: 0,
				options:{
					activeColor: 'rgb(255,50,74)',
					additionalX: 50,
					reBoundExponent: 10
				},
				items: [
				{
					label: '全部'
				}],
				fixclass: false
			}
		},
		mounted(){
			axios.post(Http.TALENTINFO)
			.then( res => {
				var ret = res.data;
				this.bannerList = ret.data.topdata;
				this.newList = ret.data.newdata;
				var arr = ret.data.talent_Category;
				for(let i=0;i<10;i++){
                	this.items.push({label: arr[i+1]})
                }
                this.items.push({label: ''});
                this.allList = ret.data.clickdata;
                this.goodsList = this.allList;
                for (let j =0,len=this.allList.length;j<len;j++){
                	var n = this.allList[j].talentcat;
                	this.allList[j].title = arr[n];
                }
			})
			window.addEventListener('scroll', this.handleScroll);
		},
		methods: {
			handleChange: function(item, index){
				if(this.fixclass == true){
					document.getElementById("all").scrollIntoView()
				}               
            	if (index == 0) {
            		axios.post(Http.TALENTINFO)
					.then( res => {
						var ret = res.data;
						var arr = ret.data.talent_Category;
						for(let i=0;i<10;i++){
		                	this.items.push({label: arr[i+1]})
		                }
		                this.allList = ret.data.clickdata;
		                for (let j =0,len=this.allList.length;j<len;j++){
		                	var n = this.allList[j].talentcat;
		                	this.allList[j].title = arr[n];
		                }
		                this.goodsList = this.allList;
					})
            	}else{
            		this.goodsList = [];
            		for (var i = 0, len=this.allList.length; i < len; i++) {
            			if(this.allList[i].talentcat == index){
            				this.goodsList.push(this.allList[i]);
            			}
            		}
            	}
            },
            handleScroll: function(){
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                var curHeight = document.documentElement.clientHeight || document.body.clientHeight;
                if( scrollTop > 470){
                	this.fixclass = true;
                	this.options.activeColor = "#fff";
                }else if (scrollTop < 450) {
                	this.fixclass = false;
                	this.options.activeColor = "rgb(255,50,74)";
                }
            },
            goArt: function(id){
            	this.$router.push('/fashion/article/' + id)
            }
		},
		destroyed: function () {//离开该页面需要移除这个监听的事件
            window.removeEventListener('scroll', this.handleScroll);
        }
	}
</script>
<style lang="scss" scoped>
	.fashion-talk{
		overflow: hidden;
		.com-header{
			position: fixed;
			top: 0;
			left: 0;
			z-index: 2;
			width: 100%;
			color: #fff;
			background: rgba(126, 165, 253, 1);
		}
		.banner{
			height: 3.2rem;
			padding-bottom: 0.4rem;
			background: linear-gradient(to bottom, #7ea5fd 0%, #4175ea 69%,#fff 70%, #fff 100%);			
			.swiper-container{
				padding-left: 10%;
				padding-top: 4%;
				padding-bottom: 8%;
				height: 92%;
				.swiper-wrapper{
					padding-bottom: 4%;
					.swiper-slide {
						width: 90%;
						padding-bottom: 8%;
						.b-content{
							width: 100%;
							position: relative;
							border-radius: 0.2rem;
							box-shadow: 0 0.1rem 0.1rem #f1f1f1;
							img{
								width: 100%;
								border-radius: 0.2rem 0.2rem 0 0;
							}
							p{
								border-radius: 0 0 0.2rem 0.2rem;
								width: 100%;
								background: #fff;
								height: 0.88rem;
								line-height: 0.88rem;
								text-align: left;
								text-indent: 0.2rem;
							}
							.bc-tab{
								position: absolute;
								right: 0.2rem;
								bottom: 0.2rem;
								width: 1rem;
								padding-top: 0.1rem;
								background: rgba(256,256,256,0.9);
								border-radius: 0.1rem 0.4rem 0 0;
								img{
									width: 0.84rem;
									height: 0.84rem;
									border-radius: 0.1rem;
									margin-top: 0.1rem;
								}
								p{
									width: 80%;
									height: 0.34rem;
									line-height: 0.34rem;
									background: none;
									color: rgb(255, 101, 68);
									text-align: center;
								}
							}
						}
					}
				}
				
			}			
		}
		.new-work{
			margin-top: 0.3rem;
			h1{
				text-align: left;
				text-indent: 0.2rem;
				font-size: 0.34rem;
				margin-bottom: 0.2rem;
			}
			ul{
				display: flex;
				text-align: center;
				width: 100%;
				overflow-x: scroll;
				overflow-y: hidden;
				&::-webkit-scrollbar{
					display: none;
				}
				li{
					flex: 0 0 2.8rem;
					margin-left: 0.2rem;
					width: 2.8rem;
					padding: 0.2rem;
					background: #f5f5f5;
					border-radius: 0.2rem;
					img{
						width: 100%;
						height: 0.9rem;
					}
					p{
						margin: 0.1rem 0;
						text-indent: none;
						text-align: left;
						font-size: 0.24rem;
					}
					.info{
						display: flex;
						align-items: center;
						img{
							margin-right: 0.2rem;
							width: 0.4rem;
							height: 0.4rem;
							border-radius: 0.4rem;
						}
						.name{
							font-size: 0.20rem;
							color: #999;
						}
					}
				}
			}
		}
		.all{
			min-height: 12.4rem;
			margin-top: 0.4rem;
			text-align: left;
			h1{
				font-size: 0.34rem;
				text-indent: 0.2rem;
				margin-bottom: 0.1rem;
			}
			.all-nav{
				&.active{
					position: fixed;
					top: 0.88rem;
					z-index: 2;
					background: linear-gradient(to left, #7ea5fd 0%, #729eff 100%);
				}
			}
			ul{
				&.active{
					padding-top: 1rem;
				}
				li{
					margin: 0.2rem;
					padding: 0.2rem;
					border-radius: 0.2rem;
					background: #f5f5f5;
					.all-header{
						position: relative;
						.all-box{
							position: absolute;
							bottom: -0.3rem;
							left: 0.2rem;
							height: 0.6rem;
							line-height: 0.6rem;
							padding: 0 0.2rem;
							border-radius: 0.1rem;
							background: #fb9696;
							color: #fff;
							font-size: 0.28rem;
						}
						img{
							width: 100%;
							height: 2.1rem;
						}
					}
					.name{
						margin-top: 0.4rem;
						margin-left: 0.2rem;
						font-size: 0.30rem;
					}
					.title{
						margin: 0.1rem 0.2rem;
						color: #999;
					}
				}
				.goods-none{
					width: 100%;
					padding: 0.4rem 0 8rem 0;
					img{
						width: 60%;
						margin-left: 20%;
					}
				}
			}
		}
	}
</style>